{extend name="base/basic" /}
{block name="title"} 首页 {/block}
<!-- Page Content -->
{block name="content"}
<div style="padding-top: 11px">

  <!--   搜索-->
  <fieldset class="table-search-fieldset" style="border: white">
<!--      <legend>搜索信息</legend>-->
      <div style="margin-left: 0px;" id="btn">
        <form class="layui-form layui-form-pane" action="">
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">用户名</label>
              <div class="layui-input-inline">
                <!--注意此处input标签里的id-->
                <input class="layui-input" id="name" autocomplete="off">
              </div>
            </div>

            <div class="layui-inline">
              <label class="layui-form-label">所属分组</label>
              <div class="layui-input-inline">
                <!--注意此处input标签里的id-->
                <select   id="group_id" >
                  <option value="">全部</option>
                  {foreach name="group" id="vo"}
                  <option value="{$vo.id}">{$vo.group_name}</option>
                  {/foreach}
                </select>
              </div>
            </div>

            <div class="layui-inline">
              <label class="layui-form-label">账号状态</label>
              <div class="layui-input-inline">
                <!--注意此处input标签里的id-->
                <select  id="state">
                      <option value="">全部</option>
                      <option value="0">正常</option>
                      <option value="1">禁用</option>
                </select>
              </div>
            </div>

            <div class="layui-inline">
              <!--注意此处button标签里的type属性-->
              <button type="button" class="layui-btn layui-btn-green"  lay-submit data-type="reload" lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
            </div>
          </div>
        </form>
      </div>
    </fieldset>
  <!--  搜索結束-->

  <!--  头部工具-->
  <script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
      <button class="layui-btn layui-btn-sm" lay-event="add">添加客服</button>
      <button class="layui-btn layui-btn-sm" onclick="javascript:window.location.reload();" lay-event="">刷新</button>
    </div>
  </script>
  <!--  头部工具-->

  <!-- 表格容器-->
  <table id="myTable" lay-filter="myTable" class="layui-tab" lay-even lay-skin="line" lay-size="lg"></table>
  <!-- 表格容器-->

  <!-- 状态模板 -->
  <script type="text/html" id="buttonTpl">
    {{#  if(d.state == 1){ }}
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="check">禁用</a>
    {{#  } else { }}
    <a class="layui-btn layui-btn-xs" lay-event="check">正常</a>
    {{#  } }}
  </script>

  <script type="text/html" id="onlineTpl">
    {{#  if(d.is_online == 0){ }}
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="check">离线</a>
    {{#  } else { }}
    <a class="layui-btn layui-btn-xs" lay-event="check">在线</a>
    {{#  } }}
  </script>

  <script type="text/html" id="img">
    {{#  if(d.img === undefined || d.img === '' || d.img === null){ }}
    暂无图片
    {{#  } else { }}
    <div> <a  lay-event="lookImg"><img width='40' title="点击放大" style="cursor: pointer;" height='40' higth id="myImg" src="{{ d.face_url}}"/></a>  </div>
    {{#  } }}
  </script>
  <!-- 状态模板 -->


  <!--  行工具按鈕-->
  <script type="text/html" id="bar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  </script>
  <!--  行工具按鈕-->
</div>
<!-- /Page Content -->
{/block}
{block name="js"}
<script src="/static/jquery/jquery-3.5.1.js"></script>
<script>
  layui.use(['table','form'], function(){
    var table = layui.table;
    var form= layui.form;
    var layer = layui.layer;
    var $     = layui.jquery;
    //表格初始化
    var tableIns = table.render({
      elem: '#myTable'
      ,id:'test'
      ,toolbar:  "#toolbarDemo" // 头部工具栏
      ,defaultToolbar:["filter","exports"] //["filter","exports","print"]
      ,url: "{:url('listData')}"//数据接口
      ,page: true //开启分页
      ,cols: [[ //表头
        // {field:  'id', title: 'ID', width:80,fixed: 'left'}
        {field: 'name', title: '用户名'}
        ,{field: 'face_url',align: "center", title: '头像',templte:'#img'}
        ,{field: 'nick_name', title: '昵称'}
        ,{field: 'group_name', title: '所属组'}
        ,{field: 'state',align: "center", title: '账号状态',toolbar:'#buttonTpl','sort':true}
        ,{field: 'is_online',align: "center", title: '在线状态',toolbar:'#onlineTpl'}
        // ,{field: 'login_ip', title: '最后登录IP'}
        // ,{field: 'login_time', title: '最后登录时间'}
        ,{field: 'add_time', title: '创建时间','sort':true}
        ,{fixed: 'right',title:'操作', align:'center', toolbar: '#bar'} //这里的toolbar值是模板元素的选择器
      ]]
      ,text: {
        none: '暂无相关数据' //默认：无数据。
      }
    });

    //头部按钮事件
    table.on('toolbar(myTable)', function(obj){
      var checkStatus = table.checkStatus(obj.config.id);
      switch(obj.event){
        case 'add':
          layer.open({
            type: 2, // 类型
            id:'add',
            anim:4, // 弹出动画 1-6
            maxmin:true, // 最大最小化
            offset: 'auto', // 坐标
            title:'添加管理员',
            area: ['500px', '400px'], // 宽高
            shadeClose:true, // 是否点击遮罩关闭
            content: "{:url('addView')}" //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
          });
          break;
        case 'delete':
          // layer.msg('删除');
          break;
        case 'update':
          // layer.msg('编辑');
          break;
      };
    });

    //行工具条事件
    table.on('tool(myTable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
      var data = obj.data; //获得当前行数据
      var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
      var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
      console.log(data)
      if(layEvent === 'detail'){ //授权
        // do something
      } else if(layEvent === 'del'){ //删除
        layer.alert('您确定要删除操作吗?', {
          skin: 'layui-layer-molv' //样式类名 自定义样式
          ,title:'删除'
          , closeBtn: 1 // 是否显示关闭按钮
          , anim: 1 //动画类型
          , btn: ['确定', '取消'] //按钮
          , icon: 6 // icon
          , yes: function () {
            $.ajax({
              type: "POST",
              url: "{:url('del')}",
              data: { id: data.id },
              success: function (e) {
                if(e.code == 1){
                  layer.msg(e.msg,{icon:6,time:2000},function (){
                    obj.del()
                  },1000)
                }else{
                  layer.msg(e.msg,{icon:5,time:2000},function (){
                    location.reload()
                  })
                }
              }
            }) //ajax结束
          }
          , btn2: function () {
            console.log('取消啥也不干')
          }
        });
      } else if(layEvent === 'edit'){ //编辑
        layer.open({
          type: 2, // 类型
          id:'add',
          anim:4, // 弹出动画 1-6
          maxmin:true, // 最大最小化
          offset: 'auto', // 坐标
          title:'编辑',
          area: ['500px', '500px'], // 宽高
          shadeClose:true, // 是否点击遮罩关闭
          content: "{:url('editView')}?id="+data.id //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
        });
        //同步更新缓存对应的值
        obj.update({
          // status: data.status
          title:data.title
        });
      } else if(layEvent === 'LAYTABLE_TIPS'){
        layer.alert('Hi，头部工具栏扩展的右侧图标。');
      }
    });

    //以下是搜索框进行监测
    var active = {
      reload: function(){
        var name     = $('#name');	//得到搜索框里已输入的数据
        var group_id = $('#group_id');	//得到搜索框里已输入的数据
        var state    = $('#state');	//得到搜索框里已输入的数据
        //执行重载
        table.reload('test', {
          page: {
            curr: 1 //重新从第 1 页开始
          }
          ,where: {
            name:      name.val()		//在表格中进行搜索
            ,group_id: group_id.val()		//在表格中进行搜索
            ,state:    state.val()		//在表格中进行搜索
          }
        });
      }
    };

    $('#btn .layui-btn').on('click', function(){
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });

  });
  // 放大图片
  $(document).on('click', '#myImg', function(data){
    var image=new Image();
    image.src=data.currentTarget.src;
    var h = image.height;
    var w = image.width;
    //var v = Wh(w,h);
    // w=v[0];
    // h=v[1];
    layer.open({
      closeBtn:0,
      shift:3,
      shadeClose : true, // 点击遮罩关闭层
      area : [ w+"px", h+"px" ],
      type: 1,
      title:false,
      //offset: v[2]+'px',
      content: "<span><img style='height:"+(h-20)+"px;width:"+(w-20)+"px;margin-left:10px;margin-top:10px;' src="+data.currentTarget.src+" /></span>" //注意，如果str是object，那么需要字符拼接。
    }, ($(this)), {open: [2, '#5CBA59'], time: 0});
  });
</script>

{/block}